<template>
  <div class="setting">
    <!-- 基础信息 -->
    <div class="setting-baseInfo section">
      <h1 class="title">基本信息</h1>
      <!-- 表单 -->
      <div class="form">
        <div class="form-group">
          <label for="nick-name">昵称</label>
          <div class="input-wrap">
            <input id="nick-name" placeholder="请输入用户名" class="form-control" type="text" v-model="nickName" />
          </div>
        </div>
        <!-- 城市 -->
        <div class="form-group">
          <label for="city">城市</label>
          <div class="input-wrap">
            <input id="city" placeholder="请输入城市" class="form-control" type="text" v-model="city" />
          </div>
        </div>
        <!-- 头像 -->
        <div class="form-group">
          <label for="file-picture">头像</label>
          <div class="input-wrap">
            <img class="picture" :src="picture" alt="">
            <input id="file-picture" class="form-control" type="file" @change="getFile"/>
          </div>
        </div>
        <!-- 保存 -->
        <button class="submit-baseInfo btn btn-primary" @click="submitBaseInfo">保存</button>
      </div>
    </div>
    <!-- 密码 -->
    <div class="setting-password section">
      <h1 class="title">修改密码</h1>
      <form class="form">
        <!-- 当前密码 -->
        <div class="form-group">
          <label for="cur-password">当前密码</label>
          <div class="input-wrap">
            <input autocomplete id="cur-password" placeholder="请输入当前密码" class="form-control" type="password" v-model="curPassword"/>
          </div>
        </div>
        <!-- 新密码 -->
        <div class="form-group">
          <label for="new-password">新密码</label>
          <div class="input-wrap">
            <input autocomplete id="new-password" placeholder="请输入新密码" class="form-control" type="password" v-model="newPassword"/>
          </div>
        </div>
        <!-- 确认 -->
        <div class="form-group">
          <label for="new-password-repeat">确认密码</label>
          <div class="input-wrap">
            <input autocomplete id="new-password-repeat" placeholder="请输入新密码" class="form-control" type="password" v-model="repeatPassword"/>
          </div>
        </div>
        <!-- 保存 -->
        <button class="submit-password btn btn-primary" @click="submitPassword">保存</button>
      </form>
    </div>
    <!-- 推出登录 -->
    <div class="logout-wrap">
      <button class="btn logout-btn btn-danger" @click="logoutCurUser">退出登录</button>
    </div>
  </div>
</template>
<script>
import { getUserInfo, changeUserInfo, changeUserPassword, logout } from 'api/user'
import { upload } from 'api/utils'
import { fileMixin } from 'utils/mixin'
export default {
  name: 'setting',
  mixins: [fileMixin],
  data () {
    return {
      nickName: '',
      city: '',
      picture: '',
      curPassword: '',
      newPassword: '',
      repeatPassword: ''
    }
  },
  methods: {
    /**
     * 从服务器获取数据展示在页面上
     * @method showUserInfo
     */
    async showUserInfo () {
      let userInfo = await getUserInfo()
      // 赋值
      if (userInfo.errno === 0) {
        this.nickName = userInfo.data.nickName
        this.picture = userInfo.data.picture
        this.city = userInfo.data.city
      } else {
        alert(userInfo.message)
      }
    },
    /**
     * 获取上传的图片文件
     * @method getFile
     */
    async getFile (e) {
      let result = await this.uploadFile(e)
      this.picture = result.data.path
    },
    /**
     * 修改用户基本信息
     * @method submitBaseInfo
     */
    async submitBaseInfo () {
      let userBaseInfo = {
        nickName: this.nickName,
        city: this.city,
        picture: this.picture
      }
      // 用户信息
      let result = await changeUserInfo(userBaseInfo)
      if (result.errno !== 0) {
        alert(result.message)
        return ''
      }
      alert('修改基本信息成功')
    },
    /**
     * 修改用户密码
     * @method submitPassword
     */
    async submitPassword () {
      let userPasswordInfo = {
        password: this.curPassword,
        newPassword: this.newPassword
      }
      let result = await changeUserPassword(userPasswordInfo)
      if (result.errno !== 0) {
        alert(result.message)
        return ''
      }
      alert('修改密码成功')
    },
    /**
     * 退出当前用户登录
     * @method logoutCurUser
     */
    async logoutCurUser () {
      let result = await logout()
      if (result.errno !== 0) {
        alert(result.message)
        return ''
      }
      alert('退出登录成功')
      this.clearCookie()
      this.$router.push({ path: '/' })
    },
    /**
     * 清除本地cookie
     * @method clearCookie
     */
    clearCookie () {
      var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
      if (keys) {
        for (var i = keys.length; i--;) {
          document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString()// 清除当前域名下的,例如：m.kevis.com
          document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString()// 清除当前域名下的，例如 .m.kevis.com
          document.cookie = keys[i] + '=0;path=/;domain=kevis.com;expires=' + new Date(0).toUTCString()// 清除一级域名下的或指定的，例如 .kevis.com
        }
      }
    }
  },
  created () {
    this.showUserInfo()
  }
}
</script>
<style lang="scss" scoped>
@import "~styles/common";
.setting{
  max-width: 600px;
  margin: 0 auto;
  .section{
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
    .title {
      margin-bottom: 10px;
      font-size: 20px;
      line-height: 24px;
      text-align: left;
    }
    .form{
      .form-group{
        margin-bottom: 10px;
        label {
          display: inline-block;
          line-height: 1.5em;
        }
        .input-wrap{
          overflow: hidden;
          .picture {
            float: left;
            margin-right: 10px;
            width: 60px;
            height: 60px;
            vertical-align: top;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
          }
          #file-picture{
            width: auto;
            margin-top: 15px;
            overflow: hidden;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .setting{
    width: auto;
    padding: 0 20px;
  }
}
</style>
